<h4>
  <a ng-click="activeInputData.name = 'explorationMetadata'" ng-hide="activeInputData.name.indexOf('explorationMetadata') == 0">
    <i class="icon-plus-sign oppia-cursor-pointer"></i>
  </a>
  <a ng-click="activeInputData.clear()" ng-show="activeInputData.name.indexOf('explorationMetadata') == 0">
    <i class="icon-minus-sign oppia-cursor-pointer"></i>
  </a>
  Exploration Metadata

  <img class="oppia-help" src="/images/help.png" tooltip="Click '+' to open an editor for the exploration metadata, including its title and editors."
       tooltip-placement="right">
</h4>

<div ng-show="activeInputData.name.indexOf('explorationMetadata') == 0">
  <div class="row-fluid">
    <div class="span6">
      <div>
        <strong>Title</strong>: <input type="text" ng-model="explorationTitle" ng-model-onblur>
        <br>
        <strong>Category</strong>: <input type="text" ng-model="explorationCategory" ng-model-onblur>
      </div>
    </div>

    <div class="span6">
      <div ng-show="explorationEditors">
        <strong>Collaborator List</strong>
        <span ng-show="canEditEditorList()">
          <button type="button" ng-click="openAddNewEditorForm()"
                  ng-hide="activeInputData.name == 'explorationMetadata.addNewEditor'">
            Add New
          </button>
        </span>

        <ul>
          <li ng-repeat="editor in explorationEditors">
            <span ng-show="$index == 0">
              <em><[editor]></em>
            </span>
            <span ng-hide="$index == 0">
              <[editor]>
            </span>
          </li>
        </ul>

        <div ng-show="canEditEditorList()">
          <form ng-show="activeInputData.name == 'explorationMetadata.addNewEditor'"
                ng-submit="addNewEditor(newEditorEmail)">
            <input type="text" ng-model="newEditorEmail"
                   placeholder="New editor's email address">
            <input type="submit" value="Add Editor">
            <button type="button" ng-click="closeAddNewEditorForm()"
              ng-show="activeInputData.name == 'explorationMetadata.addNewEditor'">
              Cancel
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <br>

  <div>
    <h4>Parameters used in this exploration</h4>
    <div ng-show="isEmpty(paramSpecs)">
      <em>No parameters used.</em>
    </div>
    <ol ng-show="!isEmpty(paramSpecs)">
      <li ng-repeat="(paramName, paramSpecValue) in paramSpecs">
        <b><[paramName]></b> (<[paramSpecValue.obj_type]>)
      </li>
    </ol>

    <br>

    <h4>
      Parameters initialized at start of exploration
      <img class="oppia-help" src="/images/help.png"
           tooltip="This allows you to initialize the values of a reader's parameters before the reader begins the exploration."
           tooltip-placement="right">
    </h4>

    <param-change-editor param-changes="explorationParamChanges"
                         param-specs="paramSpecs"
                         save-param-changes="saveExplorationParamChanges"
                         add-exploration-param-spec="addExplorationParamSpec">
    </param-change-editor>
  </div>

  <br>

  <div ng-show="explorationSnapshots.length > 0">
    <h4>Version History</h4>
    <ul>
      <li ng-repeat="snapshot in explorationSnapshots">
        [<[snapshot.versionNumber]>] (<[snapshot.createdOn]> by <[snapshot.committerId]>)
        <em>
          <[snapshot.commitMessage]>
        </em>
      </li>
    </ul>
  </div>
</div>
